昨天我們學會了用 Slider 進行滑動輸入，今天，我們要來挑戰 App 中最核心的互動方式：打字！

每天打開 App，不論是登入、搜尋、發訊息，都離不開文字輸入框（TextField）。它就像是 App 與使用者溝通的橋樑。

今天，我們不僅要學會如何建立它、即時讀取使用者輸入的內容，還要一併解決每個 iOS 新手都會遇到的魔王關卡——如何讓鍵盤消失。準備好打造更完整的互動體驗了嗎？

今日學習重點

• 認識 TextField：了解其用途，並透過 Editing Changed 事件實現即時互動
• 處理鍵盤：掌握使用 UITextFieldDelegate（按 Return）與 touchesBegan（點空白處）兩種收起鍵盤的方法
• Delegate 模式初探：理解 delegate 的基本委託概念，並完成設定
• 優化使用者體驗：學會設定初始文字與在模擬器中顯示鍵盤

實作：讓 Label 即時改變顯示文字

我們要建立一個畫面，當使用者輸入文字時，Label 會即時反映顯示輸入內容。

在初學階段，很多人會先學到這種寫法：當使用者按下 Button 後，才讓 Label 顯示輸入內容。

但這次我們要挑戰不一樣的方式：
不靠按鈕，而是每次輸入文字或刪除文字時，就自動更新畫面，達到更即時、更流暢的互動效果。

這種寫法更貼近日常 App 的使用體驗，例如搜尋欄輸入時自動跳出建議字詞、聊天室即時預覽訊息等等。

步驟 1：加入 TextField 與 Label

打開專案，進入 MainViewController.xib ，從元件庫中拖曳一個 TextField 與一個 Label 到畫面上：

用 Auto Layout 加上約束（例如置中、上下間距、寬高）讓元件位置固定。

步驟 2：建立 IBOutlet 與 IBAction

建立 IBOutlet（屬性連線）

將 TextField 連接到 MainViewController.swift，命名為 txfName：

@IBOutlet weak var txfName: UITextField!

將 Label 連接到 MainViewController.swift，命名為 lbMessage：

@IBOutlet weak var lbMessage: UILabel!

建立 IBAction（事件連線）

將 TextField 拖曳到程式碼，設定如下：

• Connection：Action
• Type：UITextField
• Event：Editing Changed
• Name：txfNameEditing

Editing Changed 是什麼？
簡單來說，就是當使用者在 TextField 中「每打一個字」、「每刪除一個字」，這個事件就會立刻被觸發。

步驟 3：即時顯示輸入內容

在 txfNameEditing 方法中加入以下程式碼：

@IBAction func txfNameEditing(_ sender: UITextField) {
    if (sender.text?.isEmpty ?? true) {
        lbMessage.text = "請在下方輸入文字"
        return
    }
    lbMessage.text = sender.text
}

程式說明

• sender.text?.isEmpty ?? true：判斷是否為空或為 nil，若是則視為沒有輸入。
• 顯示提示文字「請在下方輸入文字」以回饋使用者。
• 若有輸入，就即時顯示在 Label 上。

步驟 4：收起鍵盤的兩種方式

如果不處理，鍵盤會一直停留在畫面上。以下我們介紹兩種常見的收起方式：

方法一：按下 Return 鍵收起
讓 MainViewController.swift 支援 UITextFieldDelegate 協定，並實作收起邏輯：

extension MainViewController: UITextFieldDelegate {
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        textField.resignFirstResponder() // 收起鍵盤
        return true
    }
}

補充說明：什麼是 delegate（委派）？

delegate 是一種「委託設計模式」，就像老闆與秘書的關係：

• 老闆 (TextField)：專注核心工作，但將「使用者按 Return」等雜事外包出去。
• 秘書 (ViewController)：簽署一份工作合約 (UITextFieldDelegate)，承諾會處理這些雜事。
• 指派 (txfName.delegate = self)：老闆正式指派這位秘書。

之後，每當有狀況發生，TextField 就會自動通知它的 delegate 來處理。

別忘了在 viewDidLoad() 中指定委派者：

override func viewDidLoad() {
    super.viewDidLoad()
    txfName.delegate = self
}

方法二：點擊空白處收起
覆寫 UIViewController 的內建方法 touchesBegan，只要點畫面空白區就會收起鍵盤：

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    view.endEditing(true)
}

步驟 5：設定預設顯示文字

你可以選擇在 MainViewController.xib 右側屬性欄設定 Label 預設文字，或是在程式碼中設定，例如在 viewDidLoad() 中這樣寫：

override func viewDidLoad() {
    super.viewDidLoad()
    txfName.delegate = self
    lbMessage.text = "請在下方輸入文字"
}

步驟 6：模擬器鍵盤看不到怎麼辦？

模擬器預設不會跳出鍵盤，可以使用以下方式叫出：

• 鍵盤快捷鍵：Command + K
• 工具列選單：I/O → Keyboard → Toggle Software Keyboard
  

出現鍵盤畫面：

今日小結

今天我們掌握了 App 中最重要的輸入元件：輸入框（TextField）！我們不僅學會了如何建立它，更透過 Editing Changed 事件，實現了比「按按鈕」更流暢的即時文字互動。

最關鍵的是，你學會了處理鍵盤的兩種核心技巧：透過實作 UITextFieldDelegate 在按下 Return 時收起鍵盤，以及覆寫 touchesBegan 來實現點擊空白處收起。這些都是提升 App 使用者體驗的必備功能！

🌟 明日預告

準備好了嗎？明天，我們要來挑戰佔據了 iOS App 半壁江山的王者級元件：列表（TableView）！

從手機裡的「設定」和「聯絡人」列表，到 Instagram 的動態牆、音樂 App 的歌曲清單，TableView 無所不在。它是呈現大量、可滑動資料的唯一正解。

明天，你將學會 TableView 的運作核心—— dataSource（資料來源）與 delegate（委派），並親手打造出你的第一個滾動列表。這是每位 iOS 開發者的必經之路，也是讓你的 App 變得專業的關鍵一步！

敬請期待 《Day 21｜Xcode 列表入門：資料一覽無遺，實戰 TableView》